<template>
  <div>
    <van-nav-bar title="开户申请" fixed left-arrow @click-left="$utils.back($route.path)">
      <template #right>
        <div  class="fs-28 color-warning">{{status}}</div>
      </template>
    </van-nav-bar>
    <div class="has-top">
      <van-tabs v-model:active="active">
        <van-tab title="个人">
          <van-form ref="subForm" class="mg-25 mt-20">
            <div class="mt-20 br-12 ofh">
              <van-field
                v-model="applyInfo.outAcntNm"
                name="姓名"
                label="姓名"
                placeholder="请输入姓名"
                :disabled="state"
                :rules="[{ required: true, message: '' }]"
              />
              <van-field
                v-model="applyInfo.mobile"
                name="电话"
                label="电话"
                placeholder="请输入电话号码"
                :maxlength="11"
                :disabled="state"
                :rules="[{ required: true, message: ' ' }]"
              />
              <van-field
                v-model="applyInfo.outAcntNo"
                :disabled="state"
                name="银行卡号"
                label="银行卡号"
                placeholder="请输入银行卡号"
                :rules="[{ required: true, message: ' ' }]"
              />
              <van-field
                v-model="applyInfo.certNo"
                :disabled="state"
                name="身份证号码"
                label="身份证号码"
                placeholder="请输入身份证号码"
                :rules="[{ required: true, message: ' ' }]"
              />
            </div>
            <div class="btn-box pt-40 pb-60 flex-center">
              <van-button class="br-44 solid-btn" :disabled="state" type="info" @click="handleSubmit()">提交申请</van-button>
            </div>
          </van-form>
        </van-tab>
        <van-tab title="企业/个体工商">
          <van-form ref="subForm1" class="mg-25 mt-20">
            <div class="mt-20 br-12 ofh">
              <van-field label="选择类型">
                <template #input>
                  <van-radio-group :disabled="state" v-model="applyInfo1.cleanType" class="radio-group" direction="horizontal">
                    <van-radio name="02" class="radio">企业</van-radio>
                    <van-radio name="03" class="radio">个体工商</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <van-field
                v-model="applyInfo1.outAcntNm"
                :disabled="state"

                name="户名"
                label="户名"
                placeholder="请输入户名"
                :rules="[{ required: true, message: ' ' }]"
              />
              <van-field
                v-model="applyInfo1.outAcntNo"
                :disabled="state"
                name="银行卡号"
                label="银行卡号"
                placeholder="请输入银行卡号"
                :rules="[{ required: true, message: ' ' }]"
              />
              <van-field
                v-model="applyInfo1.interBankNo"
                :disabled="state"
                name="开户行号"
                label="开户行号"
                placeholder="请输入开户行号"
                :maxlength="12"
                :rules="[{ required: true, message: ' ' }]"
              />
              <van-field
                v-model="applyInfo1.mobile"
                :disabled="state"
                name="开户手机号"
                label="开户手机号"
                :maxlength="11"
                placeholder="请输入开户手机号"
                :rules="[{ required: true, message: ' ' }]"
              />
              <van-field
                v-model="applyInfo1.certNo"
                :disabled="state"
                name="社会信用代码"
                label="社会信用代码"
                placeholder="请输入社会信用代码"
                :rules="[{ required: true, message: ' ' }]"
              />
            </div>
            <div class="btn-box pt-40 pb-60 flex-center">
              <van-button class="br-44 solid-btn" type="info" :disabled="state" @click="handleSubmit1()">提交申请</van-button>
            </div>
          </van-form>
        </van-tab>
      </van-tabs>

    </div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import applyAreaSelect from 'components/address/applyAreaSelect'
import { OpenAccountFuiou, QueryAccountFuiou } from 'api/member'
import { GetList } from 'api/order'
import { upLoad } from 'api/upload'
import { GetBusinessFunction } from 'api/businessSetting'
export default {
  components: {
    imgBox,
    applyAreaSelect
  },
  data() {
    return {
      state:false,
      status:'',
      active: 0,
      addressPicker: false,
      addressData: {},
      maxLevel: 0,
      levelName: '',
      levelMoney: 0,
      showAreaLevel: false,
      levelList: [],
      applyInfo: {
        outAcntNm: '',
        mobile: '',
        outAcntNo:'',
        certNo:'',
        certTp:'0',
				cleanType: '01',
      },
      applyInfo1: {
				cleanType: '02',
        outAcntNm: '',
        outAcntNo:'',
        interBankNo:'',
        mobile: '',
        certNo:'',
        certTp:'1',
      },
      bankList: [],
      showBankList: false,
      imagesArr: [],
      tempImageArr: [],
      bankInfo: {},
      regionName: '',
			switch275: 0,
			payWayList: [
				{
					PayTypeName: '线下支付',
					PayType: 1
				}
			], //支付方式列表
    }
  },
  watch: {
    maxLevel(newVal, oldVal) {
      this.addressData = {}
      this.regionName = ''
    }
  },
  created() {
		this.GetBusinessFunction()
    this.inquire()
  },
  methods: {
		changeRadio(index,item) {
      this.applyInfo.payType = item.PayType
    },
		//获取开关权限
		GetBusinessFunction(){
      GetBusinessFunction(275).then(res => {
        if (res) {
          this.switch275 = res.Data[0].Value;	
        }
      })
    },
    pickArea(areaObj) {
      console.log(areaObj)
      this.regionName = (areaObj.ProvinceName || '') + (areaObj.CityName || '') + (areaObj.AreaName || '') + (areaObj.StreetName || '')
      switch (this.maxLevel) {
        case 3:
          this.applyInfo.areaId = areaObj.ProvinceId
          break
        case 4:
          this.applyInfo.areaId = areaObj.CityId
          break
        case 5:
          this.applyInfo.areaId = areaObj.AreaId
          break
        case 6:
          this.applyInfo.areaId = areaObj.StreetId
          break
      }
      this.addressPicker = false
			if(this.switch275 === 1){
				this.GetAreaApplyMoneyByUser()
			}
    },
		GetAreaApplyMoneyByUser(){
			const obj = {}
			obj.level = this.maxLevel
			obj.areaId = this.applyInfo.areaId
			GetAreaApplyMoneyByUser(obj).then(res => {
				if(res.State === 1){
					this.levelMoney = res.Data.Money
					this.applyInfo.BaseMoney = res.Data.BaseMoney
					this.applyInfo.Money = res.Data.Money
				}
			})
		},
    areaLevelOnConfirm(value) {
      console.log(value)
      this.maxLevel = value.Level
      this.levelName = value.text
      this.showAreaLevel = false
    },
    bankTypeOnConfirm(value) {
      console.log(value)
      this.bankInfo = value
      this.showBankList = false
    },
    openAddressPicker() {
      if (this.maxLevel === 0) {
        this.$toast.fail('请先选择申请区域等级')
        return
      }
      this.addressPicker = true
    },

    imageAfterRead(file) {
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res && res.Data) {
            this.tempImageArr.push({ url: res.Data.FullPath })
            var urlArr = []
            this.tempImageArr.forEach(item => {
              if (item.url) {
                urlArr.push(item.url)
              }
            })
            this.applyInfo.applyImages = urlArr.join(',')
          } else {
            if (this.imagesArr.length >= 1) {
              this.imagesArr.pop()
            } else {
              this.imagesArr = []
            }
            this.$toast.fail('上传图片失败，请重新上传')
          }
        })
      }
    },
    deleteImage(file, detail) {
      console.log(file, detail)
      var urlArr = []
      this.tempImageArr.splice(detail.index, 1)
      this.tempImageArr.forEach(item => {
        urlArr.push(item.url)
      })
      // this.tempImageArr = this.imagesArr
      this.applyInfo.applyImages = urlArr.join(',')
    },

    // 保存
    handleSubmit() {
      const _this = this
      this.$refs.subForm.validate().then(() => {
        const regex = /^1[3-9]\d{9}$/
        if(!regex.test(this.applyInfo.mobile)){
          this.$toast('请输入正确的手机号码')
          return
        }
        const pattern = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
        if(!pattern.test(this.applyInfo.certNo)){
          this.$toast('请输入正确的身份证号码')
          return
        }
				OpenAccountFuiou(this.applyInfo).then(res => {
					if (res.Data) {
            if(res.Data.ksCheckUrl){
							window.location.href = res.Data.ksCheckUrl
						}
            if(res.Data.respDesc){
						this.$toast(res.Data.respDesc)
            }
          }else{
						this.$toast(res.Msg)
					}
				})
			})
    },
    handleSubmit1() {
      const _this = this
      this.$refs.subForm1.validate().then(() => {
        const regex = /^1[3-9]\d{9}$/
        if(!regex.test(this.applyInfo1.mobile)){
          this.$toast('请输入正确的手机号码')
          return
        }
				OpenAccountFuiou(this.applyInfo1).then(res => {
					if (res.Data) {
            if(res.Data.ksCheckUrl){
							window.location.href = res.Data.ksCheckUrl
						}
            if(res.Data.respDesc){
						this.$toast(res.Data.respDesc)
            }
          }else{
						this.$toast(res.Msg)
					}
				})
			})
    },
    inquire(){
      QueryAccountFuiou({}).then(res => {
					if (res.State==1) {
            if(res.Msg == '生效' ){
              this.state = true
            }else{
              this.state = false
            }
            this.status = res.Msg;
            if(res.Data.cleanType=='01'){
              this.active = 0
              this.applyInfo = res.Data
            }else{
              this.active = 1
              this.applyInfo1 = res.Data
            }
          }else{
						this.$toast(res.Msg)
					}
				})
    }

  }
}
</script>
<style lang="scss" scoped>
.shadow-box{
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1)
}
.right-triangle {
    padding-right: 32px;
    height: 48px;
    position: relative;
}
.right-triangle:after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    right: 0;
    top: 7px;
    transform: rotate( -45deg );
    border: 8px solid;
    border-color: transparent transparent #333 #333;
}
.bank-box{
  background: #F6F6F6;
  padding: 0 20px;

  .bank-list{
    position: relative;
    padding: 40px 10px 40px 0;
    &:before{
      border-color: #EAEAEA;
    }
  }
  .arrow{
    &:after{
      right: 30px;
      top: 50px;
      color: #969799;
      height: 12px;
      width: 12px;
    }
  }
  .bank-info{
    padding: 30px 0;
    font-size: 22px;
    .bank-info-title{
      width: 140px;
      text-align: justify;
      display: inline-block;
    }
  }
  .bank-img{
    text-align: center;
    padding: 30px 0;
    .img{
      margin: 0 auto;
    }
  }
}
.btn-box button:first-child{
  margin: 0;
}
.choose{
	margin-top: 30px;
	display: flex;
  justify-content: space-between;
}
.mb-30 img{
	width: 48px;
	height: 48px;
}
</style>
